<template>
  <div class="add_channels_wrap">
    <el-button
      type="primary"
      size="small"
      @click="pop_show = true"
      class="pull-right"
      >新增品牌</el-button
    >
    <el-dialog title="新增品牌" :visible.sync="pop_show" append-to-body>
      <el-form
        :model="BrandsForm"
        status-icon
        :rules="rulesBrandsForm"
        ref="BrandsForm"
        label-width="100px"
      >
        <el-form-item label="品牌名称：" prop="name">
          <el-input
            type="text"
            v-model="BrandsForm.name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="品牌首字母：" prop="first_name">
          <el-input
            type="text"
            v-model="BrandsForm.first_name"
            autocomplete="off"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="logo图片" prop="logo">
          <el-upload 
          :action="host + '/v1/goods/brand/logo/'" 
          :auto-upload="true"
          :on-success="handleSuccess"
          :on-error="handleError"
          :data="uploadData"
          >
            <el-button size="small" type="primary">点击选择图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('ChannelsForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {
  name: "AddChannels",
  data() {
    return {
      uploadData:{
        token:localStorage.token,
      },
      host:cons.apis,
      pop_show: false,
      group_type_list: [],
      category_list: [],
      BrandsForm: {
        name: "",
        first_name: "",
      },
      fileList: [],
      rulesBrandsForm: {},
    };
  },
  methods: {
     // 上传图片成功的事件函数
    handleSuccess(res,files){
      console.log('响应',res,files)
      this.BrandsForm.logo = '/' + res.static_path + '/' + files.name
    },

    // 上传失败的响应
    handleError(){
      console.log('上传图片失败',err)
    },

    // 点击提交触发的方法
    submitForm() {
      this.axios.post(cons.apis + '/v1/goods/brands/',this.BrandsForm,
      {
        headers: {
            Authorization: "JWT " + localStorage.token,
          },
          responseType: "json",
      })
      .then((res) => {
        console.log('添加品牌的响应',res)
        if (res.status == 201){
          this.$message({
            type:'success',
            message:'添加品牌成功'
          })
          this.pop_show = false
          this.resetForm('')
        }else{
          this.$message({
            type:'error',
            message:'添加失败'
          })
        }
      }).catch((err) => {
        
      });
    },
    fnGetChannelType() {},
    fnGetCategories() {},
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.fnGetChannelType();
    this.fnGetCategories();
  },
};
</script>
